<template>
  <!-- 评估表id，员工id，员工姓名，培训表名称，培训表是否执行状态，分数 -->
  <!-- 头部功能区域 -->
  <div class="top">
    员工姓名：<el-input v-model="seName" style="width: 240px;margin-right: 20px;" placeholder="请输入员工姓名" />
    培训表名称：<el-input v-model="sePlan" style="width: 240px" placeholder="请输入培训表表名称" />
  </div>

  <!-- 主体数据 -->
  <table class="content">
    <thead>
      <tr>
        <td style="width: 10%;">员工id</td>
        <td style="width: 25%;">员工姓名</td>
        <td style="width: 25%;">培训表名称</td>
        <td style="width: 10%;">培训表执行状态</td>
        <td style="width: 20%;">评估</td>
        <td colspan="2">操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in filteredPlanInfos" :key="item.id">
        <template v-if="index >= pageSize * currentPage - pageSize && index < pageSize * currentPage">
          <td>{{ item.eid }}</td>
          <td>{{ item.ename }}</td>
          <td>{{ item.sname }}</td>
          <td>{{ item.sstatus ? '已执行' : '未执行' }}</td>
          <td v-show="item.sstatus">
            <el-rate v-model="item.score" value="rate" :texts="['继续努力！', '合格', '良好', '优秀', '非常棒']" show-text
              :disabled="ifEdit" />
          </td>
          <td v-show="!item.sstatus" class="tips">计划表未执行不可评分！</td>
          <td>
            <el-button @click="edit" type="primary" :icon="Edit" circle style="width: 30px;height: 30px;"
              :disabled="!item.sstatus" />
            <el-button @click="save(item.id, item.score)" type="primary" :icon="Check" circle
              style="width: 30px;height: 30px;" :disabled="!item.sstatus" />
          </td>
        </template>
      </tr>
    </tbody>
  </table>


  <!-- 分页 -->
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10]"
    :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
    :total="evalutionsTotal" pager-count="4" default-page-size="7" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" style="float: right;" />

</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
import { Check, Edit } from '@element-plus/icons-vue'
import { useProfessionalStore } from '@/stores/modules/professional.js'   // 导入

// 获取数据
const professionalStore = useProfessionalStore()   // 调用store实例
// 进入页面时加载的数据
const evalutions = ref([])  // 总表
const evalutionsTotal = ref()  // 总数
onMounted(async () => {
  await professionalStore.fetchEvalutionAll()
  evalutions.value = professionalStore.evalutions.scheme
  evalutionsTotal.value = professionalStore.evalutions.total

  console.log('前端收到的evalutions', evalutions.value)
})


//搜索
const seName = ref('')
const sePlan = ref('')
// 信息过滤
const filteredPlanInfos = computed(() => {
  let filtered = [...evalutions.value]; // 创建planInfos.value的副本，避免直接修改原始数据

  if (seName.value) {// 过滤员工
    filtered = filtered.filter(item => item.ename.toLowerCase().includes(seName.value.toLowerCase()));
  }
  if (sePlan.value) {// 过滤计划表
    filtered = filtered.filter(item => item.sname.toLowerCase().includes(sePlan.value.toLowerCase()));
  }

  evalutionsTotal.value = evalutions.value.length // 更新总数
  return filtered;
});

// 评分
const rate = ref()
const updateRating = (item, rating) => {
  // 更新 item 的评分值
  item.rating = rating;
  // 如果需要，可以在这里添加额外的逻辑，比如保存评分到数据库
}

const ifEdit = ref(true)  // 控制是否可以改评分
// 编辑
const edit = () => {
  ifEdit.value = !ifEdit.value
}
// 保存 
const save = async(id, score) => {
  console.log('id,score', id, score)
  const data = ref({
    id:id,
    score:score
  })
  await professionalStore.editEvalution(data.value)
  evalutions.value = professionalStore.evalutions.scheme
  evalutionsTotal.value = professionalStore.evalutions.total

  ifEdit.value = !ifEdit.value //更改状态
}

// 分页
const currentPage = ref(1)
const pageSize = ref(8)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.top {
  white-space: nowrap;
}
/* 表格样式 */
.content {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  border-collapse: collapse;
}

.content th,
.content td {
  border: 1px solid #999;
  text-align: center;
  padding: 10px 0;
}

.content thead tr {
  background-color: #3778aa;
  color: #fff;
}

.content tbody tr:nth-child(odd) {
  background-color: #eee;
}

.content tbody tr:hover {
  background-color: #e3e1e1;
}

.tips {
  color: grey;
  font-size: 13px;
}
</style>